{include file='./public/header.html'}

<div class="main">
    {include file='./public/left.html'}
    <div class="right">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Library</a></li>
                <li class="breadcrumb-item active" aria-current="page">Data</li>
            </ol>
        </nav>
        <div class="main-content">
            <div class="panel-default">
                <span class="icon ci-expand1" title="" data-toggle="tooltip" id="btn-full-screen" data-original-title="全屏"></span>
                <p class="lb-time"></p>
                <p class="lb-date"></p>
                <button type="button" class="btn btn-primary btn-gund" data-toggle="modal" data-target="#myModal">添加闹钟</button>
            </div>
            <div class="panel-list">
                <div class="max-list">

                    {foreach $clockList as $key => $val}
                    <div class="card" style="width: 18rem;">
                        <div class="card-body">
                            <h7 class="card-title">{$val['title']}</h7>
                            <span class="card-time">{$val['time']}</span>
                            <span class="card-rema" data-time="{$val['rema']}">{$val['rema']}</span>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
    <div class="alert alert-success" role="alert">...</div>
</div>

{include file='./public/dialog.html'}
<script type="text/javascript">
    $(function(){
        //获取系统当前的年、月、日
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var datestr = year + "年" + month + "月" + day + "日  ";
        $('.lb-date').html(datestr);

        start();
    });
	
    //判断时间是否为个位数，如果时间为个位数就在时间之前补上一个“0”
    function check(val) {
        if (val < 10) {
            return ("0" + val);
        }
        else {
            return (val);
        }
    }
	
    function displayTime() {
        //获取系统当前小时、分钟、毫秒
        var date = new Date();
        var hour = date.getHours();
        var minutes = date.getMinutes();
        var second = date.getSeconds();
        var timestr =  check(hour) + ":" + check(minutes) + ":" + check(second);

        //将系统时间设置到div元素中
        $('.lb-time').html(timestr);
    }
	
    //每隔1秒调用一次displayTime函数
    function start(){
        window.setInterval("displayTime()",1000)//单位是毫秒
        window.setInterval("eachList()",1000)//单位是毫秒
    }

    function eachList()
    {
        $(".card-rema").each(function(){
            var time = $(this).data('time');
            if(time <= 0){
                $(this).parents('.card').remove();
                return;
            }
            var hour = parseInt(time/3600);
            var min = parseInt(time%3600/60);
            var sec = time % 60;
            var text = check(hour) + ':' + check(min) + ':' + check(sec);
            $(this).text(text);
            $(this).data('time',time-1);
        });
    }
</script>

{include file='./public/foot.html'}
